<%@ page import="java.text.SimpleDateFormat" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.Date" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    Date date = new Date();
    String nowDate = sdf.format(date);
%>
<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>美食详情</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    美食详情
                    <small>最新发布</small>
                    <button type="button" style="float: right" class="layui-btn layui-btn-primary" lay-on="page">
                        投诉反馈
                    </button>
                </h1>
            </section>
            <br>
            <section class="content">
                <div class="row">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <h1 style="text-align: left; padding-top: 20px;margin-left: 20px">${food.title}</h1>
                            <div style="padding-top: 20px;margin-left: 20px" class="class-test-rate"
                                 lay-options="{value: ${food.score}, theme: 'green'}"></div>
                            <div style="margin-left: 20px">🚩地址：${food.address}</div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-body" style="display: flex;justify-content: center;align-items: center;">
                            <div>
                                <div class="layui-carousel" id="ID-carousel-demo-image">
                                    <div carousel-item style="border-radius: 10px">
                                        <c:forEach var="picture"
                                                   items="${food.pictureLists}">
                                            <div><img src="${picture}" style="width: 720px; height: 360px;">
                                            </div>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <div class="grid-demo grid-demo-bg1">
                                <div class="layui-card">
                                    <div class="layui-card-header">评分和点评</div>
                                    <div class="layui-card-body">
                                        <div class="class-test-rate1"
                                             lay-options="{value: ${food.score}, theme: 'green'}"></div>
                                        <br style="padding: 10px 10px 0 0"/>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4" style="padding-left: 10px">
                            <div class="grid-demo">
                                <div class="layui-card">
                                    <div class="layui-card-header">详情</div>
                                    <div class="layui-card-body">
                                        <div>主营餐品🍴：${food.foodType}</div>
                                        <div>就餐时间⏰：${food.mealTime}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4" style="padding-left: 10px">
                            <div class="grid-demo grid-demo-bg1">
                                <div class="layui-card">
                                    <div class="layui-card-header">位置和联系方式</div>
                                    <div class="layui-card-body">
                                        <div>📞电话：1356662689</div>
                                        <div>🚩地址：${food.address}</div>
                                        <%--                                        <div id="map" style="width: 100%; height: 400px;"></div>--%>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%--留言功能--%>
                    <div>
                        <br/>
                        <!-- 留言的表单 -->
                        <form class="layui-form" action="/article/saveFoodWords" method="post">
                            <input name="lw_name" value="${user.uname}" hidden="hidden"/>
                            <input name="lw_date" value="<%=nowDate%>" hidden="hidden"/>
                            <input name="lw_food_id" value="${food.id}" hidden="hidden"/>
                            <div class="layui-input-block" style="margin-left: 0;">
                                你的评价：
                                <div id="ID-rate-demo-setText-2" name="score"></div>
                                <input type="hidden" id="hiddenScore" name="score" value="5"/>
                                <textarea id="lw_content" name="lw_content" placeholder="请输入你的留言"
                                          class="layui-textarea"
                                          style="height: 150px;"></textarea>
                            </div>
                            <br/>
                            <div class="layui-input-block" style="text-align: left;margin-left: 0;">
                                <input type="submit" class="btn btn-primary" value="留言">
                            </div>
                        </form>
                        <br/>
                        <div class="layui-tab" lay-filter="test-hash">
                            <ul class="layui-tab-title">
                                <li class="layui-this" lay-id="11">点评🖱️</li>
<%--                                <li lay-id="22">问答</li>--%>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-row layui-col-space30">
                                        <div class="layui-col-md5">
                                            <div class="grid-demo">
                                                <div class="layui-card">
                                                    <div class="layui-card-header" style="height: auto">
                                                        <div id="ID-rate-demo-readonly"
                                                             lay-options="{value: 4, theme: 'green'}"></div>
                                                    </div>
                                                    <div class="layui-card-body">
                                                        <c:forEach var="statics" items="${wordStatics}">
                                                            ${statics.scoreText}：
                                                            <div class="layui-progress" style="margin-bottom: 30px">
                                                                <div class="layui-progress-bar"
                                                                     lay-percent="${statics.scoreRatioText}">
                                                                </div>
                                                            </div>
                                                        </c:forEach>
                                                        <img style="border-radius: 10px; width: 30vh"
                                                             src="https://img0.baidu.com/it/u=2992623689,540442647&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710781200&t=5e83e7951cb2ef54a159f3404495e165">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md7">
                                            <!-- 留言信息列表展示 -->
                                            <div>
                                                <div class="layui-card">
                                                    <ul style="padding-left: 20px">
                                                        <!-- 先遍历留言信息（一条留言信息，下面的全是回复信息） -->
                                                        <c:forEach items="${lw_list}" var="words">
                                                            <!-- 如果留言信息是在本文章下的才显示 -->
                                                            <c:if test="${words.lw_food_id eq food.id}">
                                                                <li style="border-top: 1px dotted #01AAED">
                                                                    <br/>
                                                                    <div style="text-align: left;color:#444">
                                                                        <div>
                                                                            <span style="color:#01AAED">${words.lw_name==null?"匿名用户":words.lw_name}</span>
                                                                        </div>
                                                                        <div class="class-test-rate"
                                                                             lay-options="{value: ${words.score}}"></div>
                                                                        <div>${words.lw_content}</div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="comment-parent"
                                                                             style="text-align:left;margin-top:7px;color:#444">
                                                                            <span>${words.lw_date}</span>
                                                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                                            <p>
                                                                                <a href="javascript:;"
                                                                                   style="text-decoration: none;"
                                                                                   onclick="btnReplyClick(this)">回复</a>
                                                                            </p>
                                                                        </div>

                                                                        <!-- 回复表单默认隐藏 -->
                                                                        <div class="replycontainer layui-hide"
                                                                             style="margin-left: 61px;">
                                                                            <form action="/article/savefoodReply"
                                                                                  method="post"
                                                                                  class="layui-form">
                                                                                <input name="lr_food_id"
                                                                                       id="lr_food_id"
                                                                                       value="${food.id}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_name" id="lr_name"
                                                                                       value="${user.uname}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_date" id="lr_date"
                                                                                       value="<%=nowDate%>"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_name"
                                                                                       id="lr_for_name"
                                                                                       value="${words.lw_name}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_words"
                                                                                       id="lr_for_words"
                                                                                       value="${words.lw_id}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_reply"
                                                                                       id="lr_for_reply"
                                                                                       value="${reply.lr_id}"
                                                                                       hidden="hidden"/>
                                                                                <div class="layui-form-item">
															<textarea name="lr_content" id="lr_content"
                                                                      lay-verify="replyContent"
                                                                      placeholder="请输入回复内容"
                                                                      class="layui-textarea"
                                                                      style="min-height:80px;"></textarea>
                                                                                </div>
                                                                                <div class="layui-form-item">
                                                                                    <button id="replyBtn"
                                                                                            class="layui-btn layui-btn-mini"
                                                                                            lay-submit="formReply"
                                                                                            lay-filter="formReply">提交
                                                                                    </button>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                    </div>

                                                                    <!-- 以下是回复信息 -->
                                                                    <c:forEach items="${lr_list}" var="reply">
                                                                        <!-- 每次遍历出来的留言下存在回复信息才展示（本条回复信息是本条留言下的就显示在当前留言下） -->
                                                                        <c:if test="${reply.lr_food_id eq food.id && reply.lr_for_words eq words.lw_id}">
                                                                            <div style="text-align: left;margin-left:61px;color: #444">
                                                                                <div>
                                                                                    <span style="color:#5FB878">${reply.lr_name}&nbsp;&nbsp;</span>
                                                                                </div>
                                                                                <div>
                                                                                    @${reply.lr_for_name}:&nbsp;&nbsp; ${reply.lr_content}</div>
                                                                            </div>
                                                                            <div>
                                                                                <div class="comment-parent"
                                                                                     style="text-align:left;margin-top:7px;margin-left:61px;color:#444">
                                                                                    <span>${reply.lr_date}</span>
                                                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                    <p>
                                                                                        <a href="javascript:;"
                                                                                           style="text-decoration: none;"
                                                                                           onclick="btnReplyClick(this)">回复</a>
                                                                                    </p>
                                                                                    <hr style="margin-top: 7px;"/>
                                                                                </div>

                                                                                <!-- 回复表单默认隐藏 -->
                                                                                <div class="replycontainer layui-hide"
                                                                                     style="margin-left: 61px;">
                                                                                    <form action="/article/savefoodReply"
                                                                                          method="post"
                                                                                          class="layui-form">
                                                                                        <input name="lr_food_id"
                                                                                               id="lr_food_id"
                                                                                               value="${food.id}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_name"
                                                                                               id="lr_name"
                                                                                               value="${user.uname}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_date"
                                                                                               id="lr_date"
                                                                                               value="<%=nowDate%>"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_name"
                                                                                               id="lr_for_name"
                                                                                               value="${words.lw_name}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_words"
                                                                                               id="lr_for_words"
                                                                                               value="${words.lw_id}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_reply"
                                                                                               id="lr_for_reply"
                                                                                               value="${reply.lr_id}"
                                                                                               hidden="hidden"/>
                                                                                        <div class="layui-form-item">
                                                    <textarea name="lr_content" id="lr_content"
                                                              lay-verify="replyContent" placeholder="请输入回复内容"
                                                              class="layui-textarea" style="min-height:80px;">
                                                      @${words.lw_name}:&nbsp;&nbsp;
                                                  </textarea>
                                                                                        </div>
                                                                                        <div class="layui-form-item">
                                                                                            <button id="replyBtn"
                                                                                                    class="layui-btn layui-btn-mini"
                                                                                                    lay-submit="formReply"
                                                                                                    lay-filter="formReply">
                                                                                                提交
                                                                                            </button>
                                                                                        </div>
                                                                                    </form>
                                                                                </div>
                                                                            </div>
                                                                        </c:if>
                                                                    </c:forEach>
                                                                </li>
                                                            </c:if>
                                                        </c:forEach>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">内容-2</div>
                                <div class="layui-tab-item">内容-3</div>
                                <div class="layui-tab-item">内容-4</div>
                                <div class="layui-tab-item">内容-5</div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
            <br>
            <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <%--    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=pOyuBkSCw01yMMS5Mu5pTlhOXPynz4Uh"></script>--%>

    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <%--    <script type="text/javascript"--%>
    <%--            src="https://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=pOyuBkSCw01yMMS5Mu5pTlhOXPynz4Uh&sn=6e35cf4d07e3b25b82f6891b692a48ce--%>
    <%--"></script>--%>
    <script>
        layui.use(function () {
            // var map = new BMapGL.Map("container");          // 创建地图实例
            // var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
            // map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
            // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            // alert("111")
            var layer = layui.layer;
            var util = layui.util;
            // 批量事件
            util.on('lay-on', {
                page: function () {
                    // 页面层
                    layer.open({
                        type: 1,
                        title: '投诉反馈',
                        area: ['420px', '240px'], // 宽高
                        content: '<div style="padding: 11px;">' +
                            '<form id="formId" class="form-horizontal" action="/feedback/saveFood" method="post">' +
                            '<div class="box-body">' +
                            '<div class="form-group"><label for="title" class="col-sm-2 control-label">标题</label><div class="col-sm-10"><input type="text" name="title" class="form-control" id="title" ></div></div>' +
                            '<div class="form-group"><label for="score" class="col-sm-2 control-label">评分</label><div id="ID-rate-demo-setText-3" name="score1"></div><input type="hidden" id="hiddenScore1" name="score" value="5"/></div>' +
                            '<div class="form-group"><label for="content" class="col-sm-2 control-label">内容</label><div class="col-sm-10"><textarea name="content" id="content" placeholder="请输入投诉内容" class="layui-textarea"></textarea></div></div>' +
                            '</div><input type="hidden" id="foodIdStr" name="foodIdStr" value="${food.id}"/><input type="hidden" readonly name="userId" value="${user.uid}" class="form-control" id="userId" placeholder="${user.uid}"><button id="btnSunmit" type="submit" class="btn btn-info pull-right" onclick="">提交 </button></form>' +
                            '</div>',
                        success: function(layero, index) {
                            var rate = layui.rate;
                            // 渲染

                            rate.render({
                                elem: '#ID-rate-demo-setText-3',
                                value: 5,
                                text: true,
                                setText: function (value) { // 自定义文本的初始回调
                                    const arrs = {
                                        '1': '非常不满意',
                                        '2': '不满意',
                                        '3': '一般',
                                        '4': '满意',
                                        '5': '非常满意',
                                    };
                                    this.span.text(arrs[value] || (value + "星"));
                                },
                                choose: function (value) {
                                    $('#hiddenScore1').val(value); // 获得选中的评分值
                                }
                            });
                        }
                    });
                },
            })

            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
            var rate = layui.rate;
            rate.render({
                elem: '.class-test-rate',
                readonly: true
            });
            rate.render({
                elem: '.class-test-rate1',
                readonly: true,
                text: true
            });
            // 渲染
            rate.render({ // eg1
                elem: '#ID-rate-demo-setText-2',
                value: 5,
                text: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                },
                choose: function (value) {
                    $('#hiddenScore').val(value); // 获得选中的评分值
                }
            });
        });
    </script>
    <%--        <script>--%>
    <%--            document.addEventListener('DOMContentLoaded', (event) => {--%>
    <%--                document.getElementById('formId').addEventListener('submit', function(e) {--%>
    <%--                    // 阻止表单的默认提交行为--%>
    <%--                    e.preventDefault();--%>

    <%--                    // 获取隐藏字段的值--%>
    <%--                    var hiddenInput = document.getElementById('hiddenScore1');--%>
    <%--                    var foodId = parseInt(hiddenInput.value, 10); // 转换为数字--%>

    <%--                    // 如果需要，这里可以更新hiddenInput的值--%>
    <%--                    // hiddenInput.value = foodId;--%>

    <%--                    // 现在可以继续提交表单，或者根据需要做其他处理--%>
    <%--                    // 例如，使用fetch或者XMLHttpRequest发送数据，或者直接调用 form.submit() 来提交表单--%>
    <%--                });--%>
    <%--            });--%>
    <%--        </script>--%>


    <script>
        function initMap() {
            // 创建地图实例
            var map = new BMapGL.Map("map");
            // 创建点坐标，这里使用了你提供的经纬度数据
            var point = new BMapGL.Point(116.3076223267197, 40.05682848596073);
            // 初始化地图，设置中心点坐标和地图级别
            map.centerAndZoom(point, 15);
            // 创建标记
            var marker = new BMapGL.Marker(point);
            // 将标记添加到地图中
            map.addOverlay(marker);
        }

        // 页面加载完成后初始化地图
        // window.onload = initMap;
    </script>

</body>
</html>